 <template>
  <div class="container">
    <section class='f-mtp10'>
      <div class='u-title'>
        <h2>筛选查询</h2>
      </div>
      <div class='u-content u-filter f-ptp10'>
        <div class='u-filter-item'>
          <label for="">知识标题</label>
          <el-input class='f-w200' clearable v-model="title" placeholder="标题关键字"></el-input>
        </div>
        <div class='u-filter-item'>
          <label for="">所属分类</label>
          <CaseTypeSelect @getCaseType='getCaseType' placeholder="所属分类" />
        </div>
        <div class='u-filter-item'>
          <label for="">所属推荐</label>
          <el-select class='f-w200' v-model="knowledgeType" clearable placeholder="所属推荐">
            <el-option
              clearable
              v-for="item in knowledgeTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <el-button class='f-h40 f-mbt10' @click="getList" type="primary">查询</el-button>
      </div>
    </section>
    
    <div class='f-mtp20'>
      <div class='u-title'>
        <h2>知识列表</h2>
        <div>
          <router-link class='u-title-btn' to='/home/knowledgeClassify'>分类</router-link>
          <router-link class='u-title-btn' to='/home/addKnowledge'>新增知识</router-link>
        </div>
      </div>
      <el-table
        :data="knowledgeList"
        border
        style="width: 100%">
        <el-table-column prop="id" label="编号" width="120"></el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="caseTypeName" label="所属分类" width="180"></el-table-column>
        <el-table-column prop="picUrl" label="封面图片" width="180"></el-table-column>
        <el-table-column prop="knowledgeTypeName" label="所属推荐" width="180"></el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="180"></el-table-column>
        <el-table-column prop="manage" label="管理">
          <template slot-scope="scope">
            <router-link class='s-c-green f-csp f-mrt10' :to='"/home/editKnowledge/" + scope.row.id'>编 辑</router-link>
            <span @click="recommend(scope.row)" class='s-c-green f-csp f-mrt10'>{{scope.row.recommend == 1 ? '取消推荐' : '推荐首页'}}</span>
            <span @click="deleteBtnClickEvent(scope.row)" class='s-c-red f-csp'>删除</span>
          </template>
        </el-table-column>
      </el-table>
      <section class='f-ptp20 f-pbt20'>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </section>
    </div>
  </div>
</template>

<script>
// 法律知识
import CaseTypeSelect from '../../components/CaseTypeSelect'
export default {
  name: 'KnowledgeManage',
  components: {
    'CaseTypeSelect': CaseTypeSelect
  },
  data() {
    return {
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      knowledgeType: '', // 知识类型
      caseType:'',   // 分类类型
      title: '',
      knowledgeList: [],
      knowledgeTypeList: [],
    }
  },
  created() {
    this.getList();
    this.getKnowledgeTypeList();
  },
  methods: {
    // 获取分类类型
    getCaseType(caseType) {
      this.caseType = caseType;
    },
    // 获取知识分类
    getKnowledgeTypeList() {
      this.$store.dispatch('GET_KNOWLEDGE_tYPE_LIST').then(res => {
        if(res.data.retCode == 0) {
          this.knowledgeTypeList = res.data.data;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 删除按钮点击事件
    deleteBtnClickEvent(row) {
      this.$confirm('确定删除该条法律知识？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteById(row.id)
      })
    },

    // 删除
    deleteById(knowledgeId) {
      this.$store.dispatch('ADD_KNOWLEDGE', {
        id: knowledgeId,
        state: 'deleted'
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('删除成功！');
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 推荐
    recommend(knowledge) {
      this.$store.dispatch('ADD_KNOWLEDGE', {
        id: knowledge.id,
        recommend: knowledge.recommend == 1 ? '0' : '1'
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('成功！');
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 获取知识列表
    getList() {
      this.$store.dispatch('GET_KNOWLEDGE_LIST', {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize,
        title: this.title,
        caseType: this.caseType,
        knowledgeType: this.knowledgeType
      }).then(res => {
        if(res.data.retCode == 0) {
          this.knowledgeList = res.data.data;
          this.totalCount = res.data.totalCount;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 分页组件 回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top{
  /* display: flex; */
  overflow: hidden;
  padding: 10px 0;
}
.top-item{
  float: left;
  margin-right: 20px;
}
.w-120{
  width: 120px;
}
.w-200{
  width: 200px;
}
</style>
